import React from 'react';
import { Row, Col, Card } from 'antd';
import { useNavigate } from 'react-router-dom';
import { FileSearchOutlined, FileDoneOutlined, FileProtectOutlined } from '@ant-design/icons';
import styles from '../styles/components.less';

const QuickAccess: React.FC = () => {
  const navigate = useNavigate();

  const items = [
    {
      title: '档案预验收',
      desc: '项目档案预验收申请及材料提交',
      icon: <FileSearchOutlined />,
      path: '/pre-acceptance'
    },
    {
      title: '档案正式验收',
      desc: '项目档案正式验收申请及验收',
      icon: <FileDoneOutlined />,
      path: '/formal-acceptance'
    },
    {
      title: '档案验收总结与备案',
      desc: '验收结果总结及档案备案',
      icon: <FileProtectOutlined />,
      path: '/summary/reform'
    }
  ];

  return (
    <Card title="快速入口" className={styles.quickAccess}>
      <Row gutter={[24, 24]}>
        {items.map((item, index) => (
          <Col span={8} key={index}>
            <div
              className="quick-access-button"
              onClick={() => navigate(item.path)}
              role="button"
              tabIndex={0}
            >
              <div className="quick-access-icon">
                {item.icon}
              </div>
              <div className="quick-access-content">
                <h3 className="quick-access-title">{item.title}</h3>
                <p className="quick-access-desc">{item.desc}</p>
              </div>
            </div>
          </Col>
        ))}
      </Row>
    </Card>
  );
};

export default QuickAccess; 